"use client";

import { useState } from "react";
import { Card, CardContent } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { toastError } from "@/components/Toast";
import Image from "next/image";
import type { GetAuthLinkUrlResponse } from "@/app/api/google/linking/auth-url/route";
import type { GetOutlookAuthLinkUrlResponse } from "@/app/api/outlook/linking/auth-url/route";
import { TypographyP } from "@/components/Typography";

export function AddAccount() {
  const [isLoadingGoogle, setIsLoadingGoogle] = useState(false);
  const [isLoadingMicrosoft, setIsLoadingMicrosoft] = useState(false);

  const handleAddAccount = async (provider: "google" | "outlook") => {
    const setLoading =
      provider === "google" ? setIsLoadingGoogle : setIsLoadingMicrosoft;
    setLoading(true);

    try {
      const response = await fetch(`/api/${provider}/linking/auth-url`, {
        method: "GET",
        headers: { "Content-Type": "application/json" },
      });

      if (!response.ok) {
        toastError({
          title: `Error initiating ${provider === "google" ? "Google" : "Microsoft"} link`,
          description: "Please try again or contact support",
        });
        setLoading(false);
        return;
      }

      const data: GetAuthLinkUrlResponse | GetOutlookAuthLinkUrlResponse =
        await response.json();

      window.location.href = data.url;
    } catch (error) {
      console.error(`Error initiating ${provider} link:`, error);
      toastError({
        title: `Error initiating ${provider === "google" ? "Google" : "Microsoft"} link`,
        description: "Please try again or contact support",
      });
      setLoading(false);
    }
  };

  return (
    <Card className="flex items-center justify-center">
      <CardContent className="flex flex-col items-center gap-4 p-6">
        <Button
          variant="outline"
          className="w-full"
          onClick={() => handleAddAccount("google")}
          loading={isLoadingGoogle}
          disabled={isLoadingGoogle || isLoadingMicrosoft}
        >
          <Image
            src="/images/google.svg"
            alt=""
            width={24}
            height={24}
            unoptimized
          />
          <span className="ml-2">Add Google Account</span>
        </Button>
        <Button
          variant="outline"
          className="w-full"
          onClick={() => handleAddAccount("outlook")}
          loading={isLoadingMicrosoft}
          disabled={isLoadingGoogle || isLoadingMicrosoft}
        >
          <Image
            src="/images/microsoft.svg"
            alt=""
            width={24}
            height={24}
            unoptimized
          />
          <span className="ml-2">Add Microsoft Account</span>
        </Button>

        <TypographyP className="text-sm text-muted-foreground">
          You will be billed for each account.
        </TypographyP>
      </CardContent>
    </Card>
  );
}
